<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
const props = defineProps({
  activeColor: {
    type: String,
    default: "#fff",
  },
  defaultColor: {
    type: String,
    default: "rgb(58,73,80)",
  },
});
let echartRef = echarts;
const chartEl = ref();
const option = {
  title: [
    {
      text: "50%",
      left: "center",
      top: "center",
      textStyle: {
        fontSize: 14,
        color: "#ffffff",
      },
    },
  ],
  tooltip: {
    trigger: "item",
  },
  legend: {
    show: false,
    top: "5%",
    left: "center",
  },
  color: [props.activeColor, props.defaultColor],
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: ["50%", "70%"],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: "bottom",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 50, name: "Search Engine" },
        { value: 50, name: "Direct" },
      ],
    },
  ],
};
onMounted(() => {
  initEcharts();
});
const initEcharts = () => {
  let chart = echartRef.init(chartEl.value);
  chart.setOption(option);
  window.onresize = function () {
    chart.resize();
  };
};
</script>
<template>
  <div class="chart-wrapper">
    <div ref="chartEl" :style="{ width: '120px', height: '120px' }"></div>
    <div class="title">水稻 36555吨</div>
  </div>
</template>
<style lang="scss" scoped>
.chart-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
